<!--
 * @Author: lujiangbo knight_lujb@163.com
 * @Date: 2024-04-04 21:15:13
 * @LastEditors: lujiangbo knight_lujb@163.com
 * @LastEditTime: 2024-05-10 13:10:49
 * @FilePath: /character-test/src/pages/Record/index.vue
 * @Description: 
 * 
 * Copyright (c) 2024 by ${git_name_email}, All Rights Reserved. 
-->
<template>
    <div class="container">
        <CustomNav custom-title="测试记录" />
        <div class="item-box">
            <TestItem v-for="item in itemDatas" :itemData="item" @answerClick="onAnswerClick"
                @reportClick="onReportClick" />
        </div>
    </div>
</template>

<script lang="ts" setup>
import { onActivated, ref } from 'vue';
import { useRouter } from 'vue-router';
import CustomNav from '@/pages/components/CustomNav/index.vue'
import TestItem from '@/pages/components/TestItem/index.vue'
import { TestItemProps } from '../type';
import { getHistories } from '../../api/Home';
const router = useRouter();
const itemDatas = ref<TestItemProps[]>([])
const onAnswerClick = (itemData: any) => {
    router.push(`/answer/${itemData.exam_id}/${itemData.id}/restart`)
}
const onReportClick = (itemData: any) => {
    router.push(`/report/${itemData.id}/${itemData.exam_type}`)
}

onActivated(() => {
    getHistories({
        page: 0,
        size: 30000
    }).then(res => {
        const { code, data } = res
        if (`${code}` === '0') {
            itemDatas.value = data.content.map((item: any) => {
                const tempItem: any = {}
                for (const key in item) {
                    if (Object.prototype.hasOwnProperty.call(item, key)) {
                        const element = item[key];
                        if (key.startsWith('exam_') && key !== 'exam_id' && key !== 'exam_type') {
                            tempItem[key.slice(5)] = element
                        } else {
                            tempItem[key] = element
                        }
                    }
                }
                tempItem.btnType = item.is_finished ? 2 : 3
                return { ...tempItem }
            })
        }
    })
})

</script>

<style lang="scss" scoped>
.container {
    height: 100vh;
    overflow: hidden;
    background-color: $color_bg_dark;
    display: flex;
    flex-direction: column;

    .item-box {
        flex: 1;
        overflow-y: scroll;
        padding: 14px;
        padding-bottom: 30px;
    }
}
</style>